<template>
  <div class="match-box">
    <div class="user-one" :class="{sliderDown:show}" @transitionend="matchSuccess">
      <div class="user-box" v-if="myInfo">
        <img class="user-head" :src="myInfo.basicInfo.avatarUrl" alt="">
        <div class="user-info">
          <div class="name">{{myInfo.basicInfo.nickName}}</div>
          <div class="winRate">胜率：{{myInfo.abilityInfo.winRatio}}%</div>
          <div class="wins">胜场：{{myInfo.abilityInfo.winNum}}场</div>
        </div>
      </div>
    </div>
    <div class="user-two" :class="{sliderUp:show}" >
      <div class="user-box"v-if="otherInfo">
        <img v-if="otherInfo.boot" class="user-head" :src="IMGHEAD+otherInfo.basicInfo.avatarUrl" alt="">
        <img v-if="!otherInfo.boot&&otherInfo.basicInfo.avatarUrl" class="user-head" :src="otherInfo.basicInfo.avatarUrl" alt="">
        <div class="user-info">
          <div class="name">{{otherInfo.basicInfo.nickName}}</div>
          <div class="winRate">胜率：{{otherInfo.abilityInfo.winRatio}}%</div>
          <div class="wins">胜场：{{otherInfo.abilityInfo.winNum}}场</div>
        </div>
      </div>
    </div>
    <img class="vs" :class="{showVs:showVs}" src="/static/vs.png" alt="">
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["update", "userList"],
  data() {
    return {
      show: false,
      showVs: false,
      myInfo: null, //我的信息
      otherInfo: null, //他人的信息
      times:0,
      audio:{},
    };
  },
  computed: {
    ...mapState(["userInfo", "IMGHEAD", "appInfo"])
  },
  watch: {
    update() {
      //一但变化，初始化 动画状态
      this.show = false;
      this.showVs = false;
    },
    userList(list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].basicInfo.userId == this.appInfo.userId) {
          this.myInfo = list[i];
        } else {
          this.otherInfo = list[i];
        }
      }
    }
  },
  methods: {
    getInfo() {
      if (this.userList) {
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].basicInfo.userId == this.appInfo.userId) {
            this.myInfo = this.userList[i];
          } else {
            this.otherInfo = this.userList[i];
          }
        }
      }
    },
    animate() {
      setTimeout(() => { //进场动画
      this.$nextTick(()=>{
        this.show = true;
      })
        setTimeout(() => {
          this.showVs = true;
        }, 200);
      }, 300);

      setTimeout(() => { //退场动画
       this.$nextTick(()=>{
        this.show = false;
        this.showVs = false;
      })
      
        setTimeout(()=>{
          this.$emit('matchClose');
        },800)
      }, 2800);
    },
    initAudio(){
      this.audio = wx.createInnerAudioContext();
      this.audio.src = "/static/audio/match.mp3";
    },
    matchSuccess(){
      if(this.times%2==0){
        this.audio.play();
      }
      this.times++;
    },
  },
  mounted() {
    this.animate();
    this.getInfo();
    this.initAudio();
  }
};
</script>

<style lang="scss" scoped>
.match-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  overflow: hidden;
}
.user-one,
.user-two {
  width: 100%;
  position: absolute;
  left: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  .user-box {
    display: flex;
    justify-content: flex-start;
    font-size: 36rpx;
    color: #fff;
    position: absolute;
  }
  .user-head {
    width: 182rpx;
    height: 182rpx;
    border: 6rpx solid #fff;
    border-radius: 50%;
    margin: 0 36rpx 0 90rpx;
    box-shadow: 0 0 20rpx 10rpx rgba(#000, 0.1);
  }
  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .winRate {
    padding: 10rpx 0;
  }
}
.user-one {
  z-index: 2;
  top: 0rpx;
  height: 853rpx;
  transform: translateY(-853rpx);
  transition: all 0.2s linear;
  background-size: 750rpx 853rpx;
  background-position: top;
  background-image: url("");
  .user-box {
    top: 170rpx;
  }
}
.user-two {
  z-index: 1;
  height: 814rpx;
  bottom: 0rpx;
  transform: translateY(814rpx);
  transition: all 0.2s linear;
  background-size: 750rpx 814rpx;
  background-position: bottom;
  background-image: url("");
  .user-box {
    flex-direction: row-reverse;
    bottom: 170rpx;
    right: 0;
    color: #4e4e4e;
    .user-info {
      align-items: flex-end;
    }
    .user-head {
      margin: 0 90rpx 0 36rpx;
    }
  }
}
.vs {
  width: 225rpx;
  height: 304rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1000);
  transition: all 0.2s linear;
  z-index: 3;
}
.sliderDown {
  // top: 0;
  transform: translateY(0);
}
.sliderUp {
  // bottom:0;
  transform: translateY(0);
}
.showVs {
  transform: translate(-50%, -50%) scale(1);
}
</style>
